<template>
  <view class="">
    <view class="wzkc_top">
      <u-search search-icon="" shape="square" placeholder="输入房源编号" v-model="searchObj.roomNum"
                :clearabled="true" :show-action="false" @input="searchInput"></u-search>
      <div class="ser_btn_box">
        <view class="fen_col" @click="houseLocationSl.show=true">
          <span>{{houseLocationSl.val}}</span>
          <u-icon name="arrow-down" color="#666"></u-icon>
        </view>
        <view class="fen_col" @click="houseTypeSl.show=true">
          <span>{{houseTypeSl.val}}</span>
          <u-icon name="arrow-down" color="#666"></u-icon>
        </view>
        <view class="fen_col" @click="houseLeaseTypeSl.show=true">
          <span>{{houseLeaseTypeSl.val}}</span>
          <u-icon name="arrow-down" color="#666"></u-icon>
        </view>
      </div>
    </view>

    <view class="page">
      <mescroll-body top="160" class="scroll-box" ref="mescrollRef" @init="mescrollInit" :down="downOption"
                     @down="downCallback" @up="upCallback">
        <ListCol class="lease_list" v-for="(item, index) in dataList" :key="index">
          <view class="lease-t" @click="goDuildInfo(item)">
            <view
                class="statetag"
                style="background:#999"
                v-if="item.state=='自用'||item.state=='公用'"
            >
              {{ item.state }}
            </view>
            <view
                v-else
                class="statetag"
                :style="{background:item.leaseState=='1'?'':'#FFAD00'}"
            >
              {{item.leaseState=='1'?'已租':'待租'}}
            </view>
            <view>
              {{item.roomNum}}
            </view>
          </view>
          <view class="lease-b">
            <view>{{item.enterpriseName||'-'}}</view>
            <view>{{item.capacity||'非住房'}}</view>
          </view>
        </ListCol>
      </mescroll-body>
    </view>


    <u-select v-model="houseTypeSl.show" :list="houseTypeSl.list" value-name="dictValue" label-name="dictLabel" @confirm="houseTypeSlConfim"></u-select>

    <u-select v-model="houseLocationSl.show" :list="houseLocationSl.list" @confirm="houseLocationSlConfim"></u-select>

    <u-select v-model="houseLeaseTypeSl.show" :list="houseLeaseTypeSl.list" @confirm="houseLeaseTypeSlConfim"></u-select>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import ListCol from "@/components/ListCol/ListCol";
export default {
  components: {ListCol},
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      showMaWarehouse:false,
      searchObj: {
        roomNum:'',
        parkNum:'',
        state:''
      },
      maWarehouseList:[
        {
          label:'全部',
          value:0
        },
        {
          label:'未到期',
          value:'未到期'
        },
        {
          label:'已到期',
          value:'已到期'
        }
      ],
      houseTypeSl:{
        show: false,
        val: '全部性质',
        list: [
          {
            value: '',
            label: '全部性质'
          }
        ]
      },
      houseLeaseTypeSl:{
        show: false,
        val: '租赁状态',
        list: [
          {
            value: '',
            label: '租赁状态'
          },
          {
            value: '0',
            label: '未租'
          },
          {
            value: '1',
            label: '已租'
          }
        ]
      },
      houseLocationSl:{
        show: false,
        val: '全部位置',
        list: [
          {
            value: '',
            label: '全部位置'
          },
          {
            value: 'A',
            label: 'A区'
          },
          {
            value: 'B',
            label: 'B区'
          }
        ]
      },
      daoQiTxt:'全部',
      dataList: [],
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
    };
  },
  onLoad(option) {
    this.getDictType()
  },
  methods: {
    getDictType(){
      this.apis.commonApi.getDictList("room_use_state").then(res=>{
        let list=res.rows
        let resList=[
          {
            dictLabel:'全部房间类型',
            dictValue:''
          },
          ...list
        ]
        this.houseTypeSl.list=resList
      })
    },
    maWareSelectFn(item) {
      this.daoQiTxt = item[0].label
      if (this.daoQiTxt == "全部") {
        this.searchObj.recordState = ""
      } else {
        this.searchObj.recordState = item[0].value
      }
    },
    /*下拉刷新的回调 */
    downCallback() {
      this.dataList = [];
      this.mescroll.resetUpScroll();
    },
    searchInput(){
      this.dataList = [];
      this.mescroll.resetUpScroll();
    },
    houseLocationSlConfim(e) {
      let val = e[0].value
      let label = e[0].label
      this.searchObj.parkNum = val
      this.houseLocationSl.val=label
      this.dataList=[]
      this.mescroll.resetUpScroll();
    },
    houseLeaseTypeSlConfim(e){
      let val = e[0].value
      let label = e[0].label
      this.searchObj.leaseState = val
      this.houseLeaseTypeSl.val=label
      this.dataList=[]
      this.mescroll.resetUpScroll();
    },
    houseTypeSlConfim(e){
      let res = e[0].value
      this.searchObj.state = res
      this.houseTypeSl.val=e[0].label
      this.dataList=[]
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.apis.buildingApi
          .buiRoomList({
            pageNum: page.num,
            pageSize: page.size,
            roomType: "公寓",
            ...this.searchObj
          })
          .then((res) => {
            this.dataList = this.dataList.concat(res.rows);
            this.mescroll.endBySize(res.rows.length, res.total);
          })
          .catch(() => {
            //联网失败的回调,隐藏下拉刷新的状态
            this.mescroll.endErr();
          });
    },
    searchSubmit() {
      this.leaseialList = []
      this.mescroll.resetUpScroll();
    },
    goDuildInfo(row) {
      console.log("goDuildInfo")
      uni.navigateTo({
        url: "./detailsInfo?id=" + row.id,
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.wzkc_top {
  position: fixed;
  top: 0;
  /* #ifdef H5 */
  top: 88rpx;
  /* #endif */
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 10rpx 32rpx 0;
  z-index: 10;
}

.ser_btn_box {
  padding-top: 10rpx;
  height: 90rpx;
  display: flex;
  .fen_col {
    margin-right: 10rpx;
    height: 60rpx;
    flex: 1;
    padding: 0 30rpx;
    background-color: #F5F5F5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    font-weight: 400;
    color: #333333;
    border-radius: 10rpx;

    &:last-child {
      margin-right: 0;
    }
  }
}

.lease_list {
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  .lease-t{
    margin-bottom: 20px;
    display: flex;
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
  }
  .lease-b{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
    font-weight: 500;
    color: #333333;

    view:first-child{
      padding-right: 20rpx;
    }
    view:nth-child(2){
      white-space: nowrap;
    }
  }
}

</style>
